<template>
    <div class="recomment-box">
        <div class="top">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="(item,index) in tabsList" :label="item.label" :name="item.name" :key="index">
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="recomment">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Recomment",
        data() {
            return {
                activeName: '/recomment/rtstyle',
                tabsList: [{
                        label: "个性推荐",
                        name: "/recomment/rtstyle"
                    },
                    {
                        label: "歌单",
                        name: "/recomment/songlist"
                    },
                    {
                        label: "主播电台",
                        name: "/recomment/zhubo"
                    },
                    {
                        label: "排行榜",
                        name: "/recomment/phang"
                    },
                    {
                        label: "歌手",
                        name: "/recomment/singer"
                    },
                    {
                        label: "最新音乐",
                        name: "/recomment/newmusic"
                    }
                ],
            };
        },
        methods: {
            handleClick(tab, event) {
                // console.log(tab, event);
                console.log(tab.name);
                // 点击跳转路由 
                this.activeName = tab.name
                this.$router.push(tab.name)

                //重新刷新网页  设置sessionStorage
                sessionStorage.setItem("select", tab.name)
            }
        },
        mounted() {
            let datas = sessionStorage.getItem("select")


            if(datas){

                this.activeName = datas
            }else{
                this.activeName="/recomment/rtstyle"
                // console.log(datas);
            }
                
        }
    }
</script>

<style lang="less">
    .top .el-tabs__item {
        color: #aaa;
    }

    .recomment-box {
        .top {
            width: 500px;
            margin: 2px auto;
        }

        .recomment {
            background-color: #fff;
            width: 100%;
            height: 600px;
            padding: 5px 90px;
            overflow-y: auto;
        }
    }
</style>